<template>
	<!-- <div class="container">
		<div class="block">
			<el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周" @change="getDate">
			</el-date-picker>
		</div>
		<div class="block">
			<el-row :gutter="20">
				<el-col :span="4"  v-for = "item in week">
					<div class="grid-content bg-purple">
						{{item.week}}
					</div>
				</el-col>
			</el-row>
		</div>
	</div> -->
	
	<div class="date">
		<el-row :gutter="20" class="pikDate">
			<el-col :span="3">
				<el-button @click="weekPre" icon="el-icon-arrow-left">上一周</el-button>
				<!-- <div @click="weekPre" class="prev-btn">
					<i class="fa fa-angle-left fa-icon" aria-hidden="true"></i>
					<span class="hidden-sm-and-down" style="margin-left: 5px;">上一周</span>
				</div> -->
			</el-col>
			<el-col :span="3">
				<el-date-picker class="right-pick-btn" style="width: 100%" :clearable=false @change="pickDate" v-model="newDate"
				 type="date" placeholder="按日期查询"></el-date-picker>
			</el-col>
			<el-col :span="3">
				<el-button @click="weekNext">下一周<i class="el-icon-arrow-right el-icon--right"></i></el-button>
				<!-- <li @click="weekNext" class="next-btn">
					<span class="hidden-sm-and-down" style="margin-right: 5px;">下一周</span>
					<i class="fa fa-angle-right fa-icon" aria-hidden="true"></i>
				</li> -->
			</el-col>
		</el-row>
		<div class="weeks">
			<div class="week">
				<div class="head">日程人员</div>
			</div>
			<div class="week" v-for="(day, index) in days" :key="index">
				<p>{{day | getWeekFormat}}</p>
				<span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
			</div>
		</div>
		<div class="events-week" v-for="(item,index) in tabledays" :key="index">
			<div class="event-box" >
				<p class="head">{{item.name}}</p>
			</div>
			<div class="event-box" v-for = "(data,index) in days" :key="index">
				<div :data-num = "data | dateFormat " ref="dataNum" >
					<div v-for="(items,index) in item.doing" :key="index" :class="{no_work: (items.end == items.start)}">
						<p  class="head">{{items.start}}</p>
						<p  class="head">{{items.work}}</p>
					</div>
				</div>
				
			</div>
		</div>
		<!-- 
		<el-row >
			
			<el-col :span="24">
				<div class="weeks">
					<ul class="days">
						<li class="date-item" @click="pick(day, index)" v-for="(day, index) in days" :key="index" :class="{selected: index == tabIndex}">
							<span v-if="day.getMonth()+1 != currentMonth" class="other-month item-wrapper">
								<p>{{day | getWeekFormat}}</p>
								<span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
							</span>
							<span v-else>
								<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
								 class="today-item">今天</span>
								<span class="item-wrapper" v-else>
									<p>{{day | getWeekFormat}}</p>
									<span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
								</span>
							</span>
						</li>
					</ul>
				</div>
			</el-col>
		</el-row> -->
		<!-- <el-row>
			<el-table :data="tabledays" style="width: 100%">
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
			</el-table>
		</el-row> -->
		<!-- <el-row>
      <el-col :span="20" :offset="2" class="time-range">
        <span
          @click="pickTime(time, index)"
          v-for="(time, index) in times"
          :key="index"
          :class="{active:index == tabTimeIndex}"
        >{{time.label}}</span>
      </el-col>
    </el-row> -->
	</div>
</template>

<!-- <script>
	export default {
		name: 'home',
		data() {
			return {
				value1: '',
				onweek: '',
				week: []
			}
		},
		methods: {
			getDate(t) {
				// console.log(this.value1)
				console.log(this.value1)

				// 				var date = new Date();
				// 				var enddate = new Date();
				// 				var weekday = this.value1.getDay() || 7
				// 				console.log(weekday)
				// 				date.setDate(this.value1.getDate() - weekday + 1)
				// 				enddate.setDate(this.value1.getDate() - weekday + 6)
				// 				console.log(this.timeFormate(date))
				// 				console.log(this.timeFormate(enddate))

				var arr = []; // 周一开始
				var now = this.value1.getTime();
				var day = this.value1.getDay(); // 星期
				var mon = this.value1.getMonth() + 1
				mon = mon < 10 ? '0' + mon : mon
				var oneDayTime = 60 * 60 * 24 * 1000;
				for (var i = 1; i < 7; i++) { 
					if (day >= i) {
						var dd = new Date(now - (day - i) * oneDayTime).getDate();
						dd = dd < 10 ? '0' + dd : dd
						this.onweek = mon + '.' + dd
						this.week.push({'week' : this.onweek})
					} else {
						var aa = new Date(now + (i - day) * oneDayTime).getDate();
						aa = aa < 10 ? '0' + aa : aa
						this.onweek = mon + '.' + aa
						this.week.push({'week' : this.onweek})

					}
				}
				console.log(this.week)
			},
		},
	}
</script>

<style>
</style>
 -->
<script>
	import moment from "moment";
	export default {
		props: {
			dateValue: {
				type: String,
				default: moment(new Date()).format("YYYY-MM-DD")
			},
			timeValue: {
				type: String,
				default: "00:00"
			}
		},
		data() {
			return {
				currentYear: 1970, // 年份
				currentMonth: 1, // 月份
				currentDay: 1, // 日期
				currentWeek: 1, // 星期
				days: [],
				tabledays: [{
					name:'haha',
					doing:[
					    {
					        start:'2019-04-18',
					        end:'2019-04-19',
					        work:'出去耍'
					    },
					    {
					        start:'2019-04-17',
					        end:'2019-04-17',
					        work:'约会'
					    }
					]
					
				},{
					name:'张丹青',
					doing:[
					    {
					        start:'2019-04-18',
					        end:'2019-04-19',
					        work:'出去耍'
					    },
					    {
					        start:'2019-04-17',
					        end:'2019-04-19',
					        work:'约会'
					    }
					]
				}],
				value1: "",
				tabIndex: null,
				newDate: moment(new Date()).format("YYYY-MM-DD"),
				tabTimeIndex: 4,
				times: [{
						time: "00:00:00~06:00:00",
						label: "00:00~06:00"
					},
					{
						time: "06:00:00~12:00:00",
						label: "06:00~12:00"
					},
					{
						time: "12:00:00~18:00:00",
						label: "12:00~18:00"
					},
					{
						time: "18:00:00~24:00:00",
						label: "18:00~24:00"
					},
					{
						time: "00:00:00~24:00:00",
						label: "今日全部"
					}
				]
			};
		},
		filters: {
			dateFormat(date) {
				return moment(date).format("YYYY-MM-DD");
			},
			getWeekFormat(date) {
				const weeksObj = {
					1: "周一",
					2: "周二",
					3: "周三",
					4: "周四",
					5: "周五",
					6: "周六",
					7: "周日"
				};
				let weekNumber = moment(date).isoWeekday();
				return weeksObj[weekNumber];
			}
		},
		mounted() {
			const index = _.findIndex(this.days, function(o) {
				// console.log('o: ', o.getDate());
				// console.log('new Date().getDate(): ', new Date().getDate());
				return o.getDate() === new Date().getDate();
			});
			console.log("index: ", index);
			this.tabIndex = index;
			console.log(this.$refs)
			console.log(this.$refs.dataNum)
		},
		created() {
			this.initData(null);
			
		},
		computed: {
			isshow: function () {
				return {}
				// console.log(this.$refs)
			}
		},
		methods: {
			formatDate(year, month, day) {
				const y = year;
				let m = month;
				if (m < 10) m = `0${m}`;
				let d = day;
				if (d < 10) d = `0${d}`;
				return `${y}-${m}-${d}`;
			},
			pickDate(date) {
				let that = this;
				that.newDate = moment(date).format("YYYY-MM-DD");
				that.$emit("dateValue", that.newDate);
				console.log("this.newDate: ", that.newDate);
				that.initData(that.newDate);
				const index = _.findIndex(that.days, function(o) {
					return o.getDate() === new Date(that.newDate).getDate();
				});
				// console.log("index: ", index);
				this.tabIndex = index;
			},
			initData(cur) {
				console.log(this.$refs.dataNum);
				let date = "";
				if (cur) {
					date = new Date(cur);
				} else {
					date = new Date();
				}
				this.currentDay = date.getDate(); // 今日日期 几号
				this.currentYear = date.getFullYear(); // 当前年份
				this.currentMonth = date.getMonth() + 1; // 当前月份
				this.currentWeek = date.getDay(); // 1...6,0  // 星期几
				if (this.currentWeek === 0) {
					this.currentWeek = 7;
				}
				const str = this.formatDate(
					this.currentYear,
					this.currentMonth,
					this.currentDay
				); // 今日日期 年-月-日
				this.days.length = 0;
				// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
				/* eslint-disabled */
				// 今天
				for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
					const d = new Date(str);
					d.setDate(d.getDate() - i);
					// console.log(y:" + d.getDate())
					// console.log('d: ', d);
					this.days.push(d);
				}
				// 这个星期
				for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
					const d = new Date(str);
					d.setDate(d.getDate() + i);
					this.days.push(d);
					console.log('d1: ', d);
				}
			},
			// 上个星期
			weekPre() {
				console.log(this.$refs.dataNum);
				const d = this.days[0]; // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() - 7);
				this.initData(d);
			},
			// 下个星期
			weekNext() {
				const d = this.days[6]; // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() + 7);
				this.initData(d);
			},
			// 上一個月  传入当前年份和月份
			pickPre(year, month) {
				const d = new Date(this.formatDate(year, month, 1));
				d.setDate(0);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			// 下一個月  传入当前年份和月份
			pickNext(year, month) {
				const d = new Date(this.formatDate(year, month, 1));
				d.setDate(35);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			// 当前选择日期
			pick(date, index) {
				this.newDate = moment(date).format("YYYY-MM-DD");
				this.$emit("dateValue", this.newDate);
				// console.log("index: ", index);
				this.tabIndex = index;
				// alert(
				//   this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
				// );
			},
			pickTime(time, index) {
				// console.log('time: ', time);
				let timeArr = [];
				timeArr.push(_.split(time.time, "~"));
				// console.log("timeArr: ", timeArr);
				this.$emit("timeValue", _.join(timeArr), "");
				// console.log("index: ", index);
				this.tabTimeIndex = index;
				// alert(
				//   this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
				// );
			}
		}
	};
</script>

<style lang="less" scoped>
	@media screen and (max-width: 1300px) {
		.days {
			li {
				padding: 5px 0 !important;
			}
		}
	}
	.no_work{
		display: none;
	}
	.weeks{
		display: flex;
		border-top: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		border-left: 1px solid #e0e0e0;
		
		.week{
			flex: 1;
			text-align: center;
			border-right: 1px solid #e0e0e0;
			padding: 10px 0;
			
			p{
				margin-bottom: 10px;
			}
			
			.head{
				line-height: 48px;
			}
		}
	}
	.events-week{
		display: flex;
		border-bottom: 1px solid #e0e0e0;
		border-left: 1px solid #e0e0e0;
		.event-box{
			flex: 1;
			text-align: center;
			border-right: 1px solid #e0e0e0;
			padding: 10px 0;
			min-height: 80px
		}
	}
	.pikDate{
		margin-bottom: 20px;
		
		
		.el-button{
			width: 100%
		}
	}
	.today-item {
		cursor: pointer;
		line-height: 45px;
	}

	.selected {
		height: 57px !important;
		box-sizing: border-box;
		color: #fff !important;
		background: #409eff !important;
	}

	.item-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.prev-btn,
	.next-btn {
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		// padding: 5px 10px;
		// border: 1px solid #ccc;
		.fa-icon {
			font-size: 18px;
		}
	}

	.right-pick-btn {
		// height: 55px;
		// .el-input--small .el-input__inner{
		//   height: 100%;
		// }
	}

	.date {
		font-size: 14px;
		margin-top: 15px;

		.time-range {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10px 0;

			span {
				cursor: pointer;
				padding-bottom: 5px;
				border-bottom: 3px solid #fff;

				&:hover {
					border-bottom: 3px solid rgb(151, 198, 245);
				}

				&:active {
					border-bottom: 3px solid rgb(151, 198, 245);
				}
			}

			.active {
				border-bottom: 3px solid #409eff;
			}
		}

		.days {
			display: flex;

			li {
				cursor: pointer;
				padding: 5px 10px;
				border: 1px solid #ccc;
				border-right: none;
				list-style: none;
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 57px;

				.other-month {
					// color: #c0c4cc;
				}
			}

			.date-item {
				&:hover {
					background: #dff0d8;
				}

				&:active {
					background: #dff0d8;
				}
				
				p{
					margin-bottom: 5px;

				}
			}

			li:nth-last-child(1) {
				border-right: 1px solid #ccc;
			}
		}
	}
</style>
